<template>
  <div class="app-container">
    <h3 class="top-title">发布新课程</h3>
    <el-steps :active="active" finish-status="success" simple>
      <el-step title="填写课程基本信息"></el-step>
      <el-step title="创建课程大纲"></el-step>
      <el-step title="发布课程"></el-step>
    </el-steps>

<!--    <el-button @click="stepAction(1)">走</el-button>-->
    <course-base-message v-if="active == 0" @stepAction="stepAction"></course-base-message>
    <course-outline-add v-if="active == 1" @stepAction="stepAction"></course-outline-add>
    <publish-course v-if="active == 2 || active == 3" @stepAction="stepAction"></publish-course>
  </div>
</template>

<script>

  import {CourseBaseMessage,CourseOutlineAdd,PublishCourse} from './components'

  export default {
    name: 'CourseAdd',
    data: function() {

      return {
        active: 0,
        courseId: null
      }
    },
    created:function() {

      console.log(this.$route.query)
      this.courseId = this.$route.query.courseId;

      let paramterActive = this.$route.query.active;


      console.log(typeof paramterActive)

      if (typeof paramterActive === 'string') {

        paramterActive = Number.parseInt(paramterActive);
      }



      if (paramterActive != undefined && paramterActive != null && Number.isInteger(paramterActive) && paramterActive >= 0 && paramterActive <= 3) {

        this.active = paramterActive;
      }

    },
    methods: {
      stepAction(step){

        this.active += step;

        if (this.active > 3){

          this.active = 0;
        }
      }
    },
    components:{
      CourseOutlineAdd,
      CourseBaseMessage,
      PublishCourse
    }
  }
</script>

<style scoped>

  .top-title{

    text-align: center;
  }

</style>
